<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机背景</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <button onclick="generate()">Generate</button>
    <button onclick="circle()" class="circleBtn">Circle | Square</button>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
  let container = document.querySelector('.container')

  for (let i = 0; i <= 80; i++) {
    let blocks = document.createElement('div')
    blocks.classList.add('block')
    container.appendChild(blocks)
  }

  function circle() {
    let circleBtn = document.querySelector('.circleBtn')
    container.classList.toggle('circle')
  }

  function generate() {
    anime({
      targets: '.block',
      translateX: function() {
        return anime.random(-900, 900)
      },
      translateY: function() {
        return anime.random(-500, 500);
      },
      scale: function() {
        return anime.random(1, 5)
      }
    })
  }

  generate()
</script>

</html>